<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Liquid</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      text-align: center;
    }

    #liquid {
      width: 100%;
      height: 300px;
    }

    canvas {
      width: 100%;
      height: 100%;
    }

    button {
      padding: 0 1em;
    }
  </style>
</head>

<body>
  <div id="liquid"></div>

  <button id="plusBtn">+</button>
  <button id="subtractBtn">-</button>
</body>
<script type="module">
  import { Liquid } from '../dist/index.js'

  const options = {
    el: document.querySelector('#liquid'),
    gap: 10,
    waveCount: 3,
    // color: '#e66465',
    // color: () => '#e66465',
    // color: [
    //   { offset: 0, color: 'red' },
    //   { offset: 0.5, color: 'yellow' },
    //   { offset: 1, color: 'green' },
    // ],
    // color: `linear-gradient(#e66465, #9198e5)`,
    color: `radial-gradient(#e66465, #9198e5)`
    // color: `conic-gradient(#e66465, #9198e5, #e66465, #9198e5, #e66465)`,
  }

  const liquid = new Liquid(options)

  let value = 0

  const plusBtn = document.querySelector('#plusBtn')

  const subtractBtn = document.querySelector('#subtractBtn')

  plusBtn.addEventListener('click', () => {
    if (value >= 100) return value = 100

    const val = Math.random() * 50

    value = Math.min(+(value + val).toFixed(2), 100)

    liquid.draw(value)
  })

  subtractBtn.addEventListener('click', () => {
    if (value <= 0) return value = 0

    const val = Math.random() * 50

    value = Math.max(+(value - val).toFixed(3), 0)

    liquid.draw(value)
  })
</script>

</html>